<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前显示的表单类型（'login' 或 'register'）
const currentForm = ref('login')

// 登录表单数据
const loginUsername = ref('')
const loginPassword = ref('')
const rememberMe = ref(false)
const loginErrorMessage = ref('')

// 注册表单数据
const registerUsername = ref('')
const registerEmail = ref('')
const registerPassword = ref('')
const confirmPassword = ref('')
const registerErrorMessage = ref('')
const registerSuccessMessage = ref('')

// 切换表单
const switchToRegister = () => {
  currentForm.value = 'register'
  // 清除表单错误消息
  loginErrorMessage.value = ''
  registerErrorMessage.value = ''
  registerSuccessMessage.value = ''
}

const switchToLogin = () => {
  currentForm.value = 'login'
  // 清除表单错误消息
  loginErrorMessage.value = ''
  registerErrorMessage.value = ''
  registerSuccessMessage.value = ''
}

// 登录表单验证
const validateLoginForm = () => {
  if (!loginUsername.value.trim()) {
    loginErrorMessage.value = '请输入用户名'
    return false
  }
  if (!loginPassword.value) {
    loginErrorMessage.value = '请输入密码'
    return false
  }
  loginErrorMessage.value = ''
  return true
}

// 注册表单验证
const validateRegisterForm = () => {
  if (!registerUsername.value.trim()) {
    registerErrorMessage.value = '请输入用户名'
    return false
  }
  if (!registerEmail.value.trim()) {
    registerErrorMessage.value = '请输入邮箱'
    return false
  }
  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(registerEmail.value)) {
    registerErrorMessage.value = '请输入有效的邮箱地址'
    return false
  }
  if (!registerPassword.value) {
    registerErrorMessage.value = '请输入密码'
    return false
  }
  if (registerPassword.value.length < 6) {
    registerErrorMessage.value = '密码长度至少为6位'
    return false
  }
  if (registerPassword.value !== confirmPassword.value) {
    registerErrorMessage.value = '两次输入的密码不一致'
    return false
  }
  registerErrorMessage.value = ''
  return true
}

// 登录处理函数
const handleLogin = () => {
  if (!validateLoginForm()) return
  
  // 模拟登录API调用
  console.log('登录信息:', {
    username: loginUsername.value,
    password: loginPassword.value,
    rememberMe: rememberMe.value
  })
  
  // 登录成功后跳转到首页
  router.push('/')
}

// 注册处理函数
const handleRegister = () => {
  if (!validateRegisterForm()) return
  
  // 模拟注册API调用
  console.log('注册信息:', {
    username: registerUsername.value,
    email: registerEmail.value,
    password: registerPassword.value
  })
  
  // 显示注册成功消息
  registerSuccessMessage.value = '注册成功！即将跳转到登录页面...'
  
  // 3秒后切换到登录表单
  setTimeout(() => {
    switchToLogin()
    // 清除注册表单数据
    registerUsername.value = ''
    registerEmail.value = ''
    registerPassword.value = ''
    confirmPassword.value = ''
  }, 3000)
}

// 忘记密码处理函数
const handleForgotPassword = () => {
  alert('忘记密码功能尚未实现')
}

// 计算当前表单的标题
const formTitle = computed(() => {
  return currentForm.value === 'login' ? '欢迎回来' : '创建新账号'
})

// 计算当前表单的副标题
const formSubtitle = computed(() => {
  return currentForm.value === 'login' 
    ? '请登录您的账号继续聊天' 
    : '加入我们，开始聊天之旅'
})
</script>

<template>
  <div class="chat-auth-container">
    <!-- 装饰背景元素 -->
    <div class="auth-decoration auth-decoration-1"></div>
    <div class="auth-decoration auth-decoration-2"></div>
    <div class="auth-decoration auth-decoration-3"></div>
    
    <div class="chat-auth-card">
      <!-- 应用logo和标题 -->
      <div class="app-brand">
        <div class="logo-container">
          <svg viewBox="0 0 24 24" width="60" height="60" stroke="#4f46e5" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
        </div>
        <h1 class="app-name">ChatPulse</h1>
        <p class="app-slogan">实时连接，畅所欲言</p>
      </div>
      
      <!-- 表单切换标签 -->
      <div class="form-tabs">
        <button 
          class="tab-button" 
          :class="{ active: currentForm === 'login' }"
          @click="switchToLogin"
        >
          登录
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentForm === 'register' }"
          @click="switchToRegister"
        >
          注册
        </button>
      </div>
      
      <!-- 表单标题 -->
      <div class="form-header">
        <h2>{{ formTitle }}</h2>
        <p>{{ formSubtitle }}</p>
      </div>
      
      <!-- 登录表单 -->
      <div v-if="currentForm === 'login'" class="form-content">
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="login-username" class="form-label">用户名</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              <input
                type="text"
                id="login-username"
                v-model="loginUsername"
                placeholder="请输入用户名"
                class="form-input"
                autocomplete="username"
              />
            </div>
          </div>
          
          <div class="form-group">
            <label for="login-password" class="form-label">密码</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              <input
                type="password"
                id="login-password"
                v-model="loginPassword"
                placeholder="请输入密码"
                class="form-input"
                autocomplete="current-password"
              />
            </div>
          </div>
          
          <div class="form-options">
            <label class="remember-me">
              <input type="checkbox" v-model="rememberMe" />
              <span>记住我</span>
            </label>
            <button
              type="button"
              class="forgot-password"
              @click="handleForgotPassword"
            >
              忘记密码?
            </button>
          </div>
          
          <div v-if="loginErrorMessage" class="error-message">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="#ef4444" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            {{ loginErrorMessage }}
          </div>
          
          <button type="submit" class="primary-button">
            <span>登录</span>
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </form>
        
        <div class="form-footer">
          <p>还没有账号? 
            <button type="button" class="link-button" @click="switchToRegister">
              立即注册
            </button>
          </p>
        </div>
      </div>
      
      <!-- 注册表单 -->
      <div v-else class="form-content">
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <label for="register-username" class="form-label">用户名</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              <input
                type="text"
                id="register-username"
                v-model="registerUsername"
                placeholder="请输入用户名"
                class="form-input"
                autocomplete="username"
              />
            </div>
          </div>
          
          <div class="form-group">
            <label for="register-email" class="form-label">邮箱</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22 6 12 13 2 6"></polyline>
              </svg>
              <input
                type="email"
                id="register-email"
                v-model="registerEmail"
                placeholder="请输入邮箱"
                class="form-input"
                autocomplete="email"
              />
            </div>
          </div>
          
          <div class="form-group">
            <label for="register-password" class="form-label">密码</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              <input
                type="password"
                id="register-password"
                v-model="registerPassword"
                placeholder="请设置密码（至少6位）"
                class="form-input"
                autocomplete="new-password"
              />
            </div>
          </div>
          
          <div class="form-group">
            <label for="confirm-password" class="form-label">确认密码</label>
            <div class="input-container">
              <svg class="input-icon" viewBox="0 0 24 24" width="18" height="18" stroke="#94a3b8" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              <input
                type="password"
                id="confirm-password"
                v-model="confirmPassword"
                placeholder="请再次输入密码"
                class="form-input"
                autocomplete="new-password"
              />
            </div>
          </div>
          
          <div v-if="registerErrorMessage" class="error-message">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="#ef4444" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            {{ registerErrorMessage }}
          </div>
          
          <div v-if="registerSuccessMessage" class="success-message">
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="#10b981" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            {{ registerSuccessMessage }}
          </div>
          
          <button type="submit" class="primary-button" :disabled="!!registerSuccessMessage">
            <span>注册</span>
            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
              <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
            </svg>
          </button>
        </form>
        
        <div class="form-footer">
          <p>已有账号? 
            <button type="button" class="link-button" @click="switchToLogin">
              返回登录
            </button>
          </p>
          <p class="terms-text">
            注册即表示您同意我们的<a href="#" class="text-link">服务条款</a>和<a href="#" class="text-link">隐私政策</a>
          </p>
        </div>
      </div>
      
      <!-- 分隔线 -->
      <div class="divider">
        <span>或者</span>
      </div>
      
      <!-- 社交登录选项 -->
      <div class="social-login">
        <button class="social-button social-wechat">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="#07C160">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          <span>微信登录</span>
        </button>
        
        <button class="social-button social-qq">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="#12B7F5">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          <span>QQ登录</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础样式和容器 */
.chat-auth-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 装饰背景元素 */
.auth-decoration {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(40px);
}

.auth-decoration-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
}

.auth-decoration-2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  right: -200px;
}

.auth-decoration-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
}

/* 登录/注册卡片 */
.chat-auth-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.5s ease-out;
  position: relative;
  z-index: 1;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 应用品牌 */
.app-brand {
  text-align: center;
  margin-bottom: 30px;
}

.logo-container {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.app-name {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.app-slogan {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* 表单标签切换 */
.form-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}

.tab-button {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #4f46e5;
}

.tab-button.active {
  background: white;
  color: #4f46e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表单标题 */
.form-header {
  text-align: center;
  margin-bottom: 32px;
}

.form-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.form-header p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* 表单内容 */
.form-content {
  margin-bottom: 24px;
}

/* 表单组 */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 8px;
}

.input-container {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.form-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.form-input::placeholder {
  color: #94a3b8;
}

/* 表单选项 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
}

.remember-me input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  accent-color: #4f46e5;
}

.forgot-password {
  background: none;
  border: none;
  color: #4f46e5;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* 错误和成功消息 */
.error-message,
.success-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}

.error-message {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
}

.success-message {
  background: #f0fdf4;
  color: #10b981;
  border: 1px solid #dcfce7;
}

/* 按钮样式 */
.primary-button {
  width: 100%;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.primary-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.primary-button:hover::before {
  left: 100%;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
}

.primary-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.link-button {
  background: none;
  border: none;
  color: #4f46e5;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  transition: color 0.3s ease;
}

.link-button:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* 表单底部 */
.form-footer {
  text-align: center;
  margin-top: 20px;
}

.form-footer p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
}

.terms-text {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.text-link {
  color: #4f46e5;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

/* 分隔线 */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.divider span {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
}

/* 社交登录 */
.social-login {
  display: flex;
  gap: 12px;
}

.social-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-button:hover {
  border-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 576px) {
  .chat-auth-container {
    padding: 16px;
  }
  
  .chat-auth-card {
    padding: 30px 24px;
  }
  
  .logo-container {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }
  
  .app-name {
    font-size: 24px;
  }
  
  .form-header h2 {
    font-size: 20px;
  }
  
  .social-login {
    flex-direction: column;
  }
  
  .form-input {
    font-size: 14px;
    padding: 12px 16px 12px 44px;
  }
  
  .primary-button {
    padding: 12px 20px;
    font-size: 14px;
  }
}
</style>